<template>
  <div>
    <n-card class="GoodsList__content">
      <n-space :vertical="false" >
        <n-input-group>
          <n-input v-model:value="inputValue" type="input" @keydown.enter="search" placeholder="请输入内容"/>
          <n-button  color="#dedede"  @click="search">
            <template #icon>
              <n-icon>
                <IosSearch />
              </n-icon>
            </template>
          </n-button>
        </n-input-group>
        <n-button @click="create" type="info">添加商品</n-button>
      </n-space>
      <br>
      <n-data-table
        :columns="columns"
        :single-line="false"
        :data="goodsList"
        :pagination="pagination"
      >
      </n-data-table>
    </n-card>
  </div>
</template>
<script lang="ts">
import {NDataTable,NCard,NButton,NSpace,NInput,NIcon,NInputGroup} from 'naive-ui';
import {h,reactive,computed,ref} from 'vue';
import {IosSearch} from '@vicons/ionicons4'
import router from '../router';
export default {

  components:{
    NDataTable,NCard,NButton,NSpace,NInput,NIcon,IosSearch,NInputGroup
  },
  setup(){
    const inputValue=ref('');
    const searchValue=ref('');
    let change=ref(false);
    const search=()=>{
      searchValue.value=inputValue.value;
    }

    const create=()=>{
      router.push('/goods/goods-list/add');
    }


    const goodsList=computed(()=>{
      if(change.value)
        change.value=!change.value;
      let list=JSON.parse(localStorage.getItem('goodsList'));
      if(searchValue.value.length>0)
      {
        list=list.filter((item:any)=>{
          if(item.goodsName.search(searchValue.value)!=-1)
          {
            return item;
          }
        })
      }
      for(let i=0;i<list.length;i++)
      {
        list[i].index=i+1;
      }
      return list;
    });
    /**
     * 分页map
     */
    const pagination=reactive<{}>({
      page:1,
      pageSize:6,
      showSizePicker:true,
      pageSizes:[6,8,10],
      onChange:(page:number)=>{OnChange(page);},
      onPageSizeChange:(pageSize:any)=>{OnPageSizeChange(pageSize);}
    })
    /**
     * 改变页时的函数
     * params p 分页后的页值
     */
    const OnChange=(p:number)=>{
      pagination.page=p;
    }
    /**
     * 改变一页最大数量的函数
     * params ps 一页最大数量
     */
    const OnPageSizeChange=(ps:number)=>{
      pagination.pageSize=ps;
      pagination.page=1;
    }

    const columns=[
      {
        title:'#',
        key:'index',
      },{
        title:'商品名称',
        key:'goodsName',
      },{
        title:'价格(元)',
        key:'price',
      },{
        title:'商品数量',
        key:'num',
      },{
        title:'商品重量',
        key:'weight',
      },{
        title:'创建时间',
        key:'time',
      },{
        title:'操作',
        key:'action',
        render(row:object){
          return [h(
            NButton,{
              type:'info',
              onClick:()=>{
                router.push({path:'/goods/goods-list/edit',query:{id:row.id}});
              }
            },{
              default:'编辑'
            }
            ),h(
            NButton,{
              type:'error',
              onClick:()=>{
                let list=JSON.parse(localStorage.getItem('goodsList'));
                for(let i=0;i<list.length;i++)
                {
                  if(list[i].id==row.id)
                  {
                    list.splice(i,1);
                    localStorage.setItem('goodsList',JSON.stringify(list));
                    change.value=true;
                    return;
                  }
                }
              }
            }
            ,{
              default:'删除'
            }
            )
          ]
        }
      }
    ]

    return {
      columns,
      goodsList,
      pagination,
      inputValue,
      search,
      create,
    }
  }
  
};
</script>
<style>
.GoodsList__content{
  margin:24px 24px 24px;
  width: inherit;
  font-size:12px;
}
</style>
